<template>
  <view class="popup-overlay" @click="handleOverlayClick">
    <view class="popup-container" @click.stop>
      <!-- 头部标题栏 -->
      <!-- <view class="popup-header">
          <view class="header-title">事件详情</view>
          <view class="close-btn" @click="closePopup">
            <text class="iconfont">✕</text>
          </view>
        </view> -->

      <!-- 内容区域 -->
      <view class="popup-content">
        <!-- Tab导航 -->
        <view class="tab-nav">
          <view
            class="tab-item"
            :class="{ active: activeTab === 'info' }"
            @click="switchTab('info')"
          >
            事件信息
          </view>
          <view
            class="tab-item"
            :class="{ active: activeTab === 'process' }"
            @click="switchTab('process')"
          >
            办理经过
          </view>
          <view
            class="tab-item"
            :class="{ active: activeTab === 'photos' }"
            @click="switchTab('photos')"
          >
            现场照片信息
          </view>
        </view>

        <!-- Tab内容 -->
        <scroll-view class="tab-content" scroll-y>
          <!-- 事件信息 -->
          <view v-if="activeTab === 'info'" class="info-content">
            <view class="info-item">
              <text class="label">案件编号:</text>
              <text class="value">{{ eventData.taskNum }}</text>
            </view>
            <view class="info-item">
              <text class="label">发现时间:</text>
              <text class="value">{{ eventData.occurTime }}</text>
            </view>
            <view class="info-item">
              <text class="label">事件来源:</text>
              <text class="value">{{ eventData.eventSrcName }}</text>
            </view>
            <view class="info-item">
              <text class="label">视频编号:</text>
              <text class="value">{{ eventData.deviceGuid }}</text>
            </view>
            <view class="info-item">
              <text class="label">事件类型:</text>
              <text class="value">{{ eventData.subTypeName }}</text>
            </view>
            <view class="info-item">
              <text class="label">处置单位:</text>
              <text class="value">{{ eventData.disposeHumanName }}</text>
            </view>
            <view class="info-item">
              <text class="label">所属区域:</text>
              <text class="value">{{ eventData.districtName }}</text>
            </view>
            <view class="info-item">
              <text class="label">所属街道:</text>
              <text class="value">{{ eventData.streetName }}</text>
            </view>
            <view class="info-item">
              <text class="label">事件地址:</text>
              <text class="value">{{ eventData.address }}</text>
            </view>
            <view class="info-item">
              <text class="label">事件描述:</text>
              <text class="value desc">{{ eventData.eventDesc }}</text>
            </view>
            <view class="info-item">
              <text class="label">事件状态:</text>
              <text class="value">{{ eventData.eventStateName }}</text>
            </view>
          </view>

          <!-- 办理经过 -->
          <view v-if="activeTab === 'process'" class="process-content">
            <view class="process-item">
              <view class="process-header">
                <view class="process-status received"> 发现 </view>
                <view class="process-time">视频监控智能识别（AI识别）</view>
              </view>
              <view class="process-detail">
                <view class="process-text"
                  >发现时间：{{ eventData.occurTime }}</view
                >
                <view class="process-text"
                  >事件类别：{{ eventData.subTypeName }}</view
                >
                <view class="process-text"
                  >事件地址：{{ eventData.address }}</view
                >
                <view class="process-text"
                  >事件描述：{{ eventData.eventDesc }}</view
                >
              </view>
            </view>
            <view class="process-item">
              <view class="process-header">
                <view class="process-status processing"> 分拨 </view>
                <view class="process-time"
                  >{{ processData.fb.unitName }}({{
                    processData.fb.humanName.split("#")[0]
                  }})</view
                >
              </view>
              <view class="process-detail">
                <view class="process-text"
                  >接收时间：{{ processData.fb.actionTime }}</view
                >
                <view class="process-text"
                  >分拨时间：{{ processData.fb.actionTime }}</view
                >
                <view class="process-text"
                  >分拨意见：{{ processData.fb.itemContent }}</view
                >
              </view>
            </view>
            <view class="process-item">
              <view class="process-header">
                <view class="process-status end"> 处置 </view>
                <view class="process-time"
                  >{{ processData.cz.unitName }}({{
                    processData.cz.humanName.split("#")[0]
                  }})</view
                >
              </view>
              <view class="process-detail">
                <view class="process-text"
                  >处理情况：{{ processData.cz.actionName }}</view
                >
                <view class="process-text"
                  >处置时间：{{ processData.cz.actionTime }}</view
                >
                <view class="process-text"
                  >处置意见：{{ processData.cz.detail }}</view
                >
                <view class="process-text"
                  >联系电话：{{
                    processData.cz.humanName.split("#").length >= 2
                      ? processData.cz.humanName.split("#")[1]
                      : processData.cz.humanName
                  }}</view
                >
              </view>
            </view>
          </view>

          <!-- 现场照片信息 -->
          <view v-if="activeTab === 'photos'" class="photos-content">
            <view class="photo-grid">
              <view class="photo-item" @click="previewPhoto(0)">
                <view class="title">视频发现</view>
                <image :src="photoData.sb" mode="aspectFill" />
              </view>
              <view class="photo-item" @click="previewPhoto(1)">
                <view class="title">现场反馈</view>
                <image :src="photoData.czUrl" mode="aspectFill" />
              </view>
              <view class="photo-item" @click="previewPhoto(2)">
                <view class="title">视频复核</view>
                <image :src="photoData.fhUrl" mode="aspectFill" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { commonApi } from "@/api/index.js";
import { onLoad } from "@dcloudio/uni-app";
// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

// Emits
const emit = defineEmits(["close"]);

// 当前激活的tab
const activeTab = ref("info");

// 模拟数据
const eventData = ref({
  taskNum: "20250919034", //案件编号
  occurTime: "2025-09-19 09:24:59", //发现时间
  eventSrcName: "视频监控", //事件来源
  deviceGuid: "4301050900131048976", //视频编号
  subTypeName: "现场设备管理问题", //事件类型
  disposeHumanName: "市级综合管理单位", //处置单位
  districtName: "开福区", //所属区域
  streetName: "望麓街道", //所属街道
  address: "湘雅路长沙市开福区麓谷兴中路", //事件地址
  eventDesc: "发现山松设备故障。", //事件描述
  eventStateName: "已处置", //事件状态
});

const processData = ref({
  cz: {
    unitName: "市级综合管理单位",
    humanName: "张三#15732352171",
    actionName: "已处置",
    actionTime: "2025-09-19 10:15:45",
    detail: "现场设备故障已修复，系统运行正常",
  },
  fb: {
    unitName: "开福区综合管理单位",
    humanName: "李四#15732352172",
    actionTime: "2025-09-19 09:25:30",
    dispatchTime: "2025-09-19 09:25:30",
    itemContent: "分拨给开福区综合管理单位",
  },
});

const photoData = reactive({
  sb: "", //视频发现
  czUrl: "", //现场反馈
  fhUrl: "", //视频复核
});

// 方法
const switchTab = (tab) => {
  activeTab.value = tab;
};

const closePopup = () => {
  emit("close");
};

const handleOverlayClick = () => {
  closePopup();
};

const previewPhoto = (index) => {
  const urls = [photoData.sb, photoData.czUrl, photoData.fhUrl];
  uni.previewImage({
    urls: urls,
    current: index,
  });
};
//获取轮播图
const getBanner = async (id) => {
  const res = await commonApi.getBanner(id);
  if (res.data && res.data.length > 0) {
    photoData.sb = res.data[0].sb;
  }
};
//获取处置流程图片
const getDisposalPhoto = async (id) => {
  const res = await commonApi.getDisposalPhoto(id);
  if (res.data) {
    const data= res.data[0]
    photoData.czUrl = data.czUrl;
    photoData.fhUrl = data.fhUrl;
  }
};
//获取处置详情
const getDisposalDetail = async (id) => {
  const res = await commonApi.getDisposalDetail(id);
  if (res.data && res.data.length > 0) {
    const data = res.data[0];
    eventData.value.taskNum = data.taskNum; //案件编号
    eventData.value.occurTime = data.occurTime; //事件发生时间
    eventData.value.eventSrcName = data.eventSrcName; //事件来源
    eventData.value.deviceGuid = String(data.deviceGuid); //视频编号
    eventData.value.subTypeName = data.subTypeName; //事件类型
    eventData.value.disposeHumanName = data.disposeHumanName; //处置单位
    eventData.value.districtName = data.districtName; //所属区域
    eventData.value.streetName = data.streetName; //所属街道
    eventData.value.address = data.address; //事件地址
    eventData.value.eventDesc = data.eventDesc; //事件描述
    eventData.value.eventStateName = data.eventStateName; //事件状态
    const processes = data.processes.slice(-2);
    processData.value.fb = processes[0];
    processData.value.cz = processes[1];
  }
};

onLoad(({ id, code }) => {
  getBanner(id);
  getDisposalPhoto(id);
  getDisposalDetail(code);
});
</script>

<style lang="scss" scoped>
$primary-color: #2196f3;
$bg-color: #f5f5f5;
$text-color: #333;
$border-color: #e0e0e0;
$success-color: #4caf50;
$warning-color: #ff9800;
$info-color: #00bcd4;

.popup-container {
  background-color: #fff;
  border-radius: 24rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 44px);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  background: linear-gradient(
    135deg,
    $primary-color 0%,
    lighten($primary-color, 10%) 100%
  );
  color: #fff;

  .header-title {
    font-size: 36rpx;
    font-weight: 600;
  }

  .close-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);

    .iconfont {
      font-size: 32rpx;
      color: #fff;
    }
  }
}

.popup-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tab-nav {
  display: flex;
  background-color: #fff;
  border-bottom: 2rpx solid $border-color;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    transition: all 0.3s ease;

    &.active {
      color: $primary-color;
      font-weight: 600;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 6rpx;
        background: linear-gradient(
          90deg,
          $primary-color 0%,
          lighten($primary-color, 20%) 100%
        );
        border-radius: 3rpx;
      }
    }
  }
}

.tab-content {
  flex: 1;
  background-color: $bg-color;
}

// 事件信息样式
.info-content {
  padding: 32rpx;

  .info-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .label {
      font-size: 28rpx;
      color: #666;
      width: 160rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 28rpx;
      color: $text-color;
      flex: 1;
      word-break: break-all;

      &.desc {
        line-height: 1.6;
      }
    }
  }
}

// 办理经过样式
.process-content {
  padding: 32rpx;

  .process-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    position: relative;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 24rpx;
      bottom: -24rpx;
      width: 2rpx;
      height: 24rpx;
      background-color: $border-color;
    }

    .process-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .process-status {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #fff;

        &.received {
          background-color: $info-color;
        }

        &.processing {
          background-color: $warning-color;
        }

        &.end {
          background-color: $success-color;
        }
      }

      .process-time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .process-detail {
      .process-person {
        font-size: 26rpx;
        color: $primary-color;
        margin-bottom: 8rpx;
      }

      .process-text {
        font-size: 28rpx;
        color: $text-color;
        line-height: 1.5;
        margin-bottom: 8rpx;
      }

      .process-contact {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

// 现场照片样式
.photos-content {
  padding: 32rpx;

  .photo-grid {
    .photo-item {
      padding: 28rpx;
      margin-bottom: 24rpx;
      position: relative;
      background-color: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      .title {
        margin-bottom: 14rpx;
      }
      image {
        width: 100%;
        height: 250rpx;
        object-fit: cover;
        border-radius: 12rpx;
      }

      .photo-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          45deg,
          transparent 0%,
          rgba($primary-color, 0.8) 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;

        .preview-text {
          color: #fff;
          font-size: 28rpx;
          font-weight: 600;
        }
      }

      &:active {
        .photo-mask {
          opacity: 1;
        }
      }
    }
  }
}
</style>
